import React, {Component} from 'react'
import {FlatList, Dimensions, Text, TouchableOpacity, View, Image, ScrollView, SafeAreaView} from "react-native";
import ScrollableTabView, {ScrollableTabBar} from "react-native-scrollable-tab-view";
import LinearGradient from "react-native-linear-gradient";
import Items from "./Items";

export default class Boutique extends Component {
    constructor() {
        super();
        this.state = {
            categoryList: [
                {
                    pic: "https://img.alicdn.com/tfscom/i2/513403911/O1CN011elHT7bf67rdasF_!!513403911.jpg_360x360xzq90.jpg",
                    name: "三只松鼠",
                    id: 19031418
                }

            ]
        }
    }

    render() {
        return (
            <LinearGradient colors={['#f42', '#fff']} style={{flex: 1}}>
                <SafeAreaView style={{flex: 1}}>

                    <ScrollableTabView
                        style={{flex: 1, marginBottom: 10}}
                        renderTabBar={() => <ScrollableTabBar style={{borderBottomWidth: 0}}/>}
                        tabBarUnderlineStyle={{
                            width: 30,
                            marginLeft: 35,
                            marginRight: 15,
                            backgroundColor: "#fff",
                            borderRadius: 2
                        }}
                        tabBarActiveTextColor="#fff"
                        tabBarInactiveTextColor="#fff"
                        // tabBarBackgroundColor="#40f"
                    >
                        {this.state.categoryList.map((info, index) => {
                            return (
                                <View style={{margin: 10, borderRadius: 5, flex: 1, backgroundColor: "#eeeeee"}}
                                      tabLabel={info.name}>
                                    <Items favoritesIdData={info.id} />
                                </View>
                            );
                        })}

                    </ScrollableTabView>
                </SafeAreaView>
            </LinearGradient>
        )
    }

}

